<template>
	<TitleBarVue :title="title"/>
	<web-view :src="webViewUrl"></web-view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	export default {
		data() {
			return {
				title: '免费性格测试、类型描述',
				webViewUrl: 'https://www.16personalities.com/ch'
			};
		},
		components: {TitleBarVue},
		onReady() {
			// #ifdef APP-PLUS
			var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
			setTimeout(function() {
				wv = currentWebview.children()[0]
				wv.setStyle({top:150,height:300})
			}, 1000); //如果是页面初始化调用时，需要延时一下
			// #endif
		}
	};
	
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
}
.srchInput {
	background: #f4f5fa;
	border-radius: 40rpx;
	width: 100%;
	height: 60rpx;
	padding-left: 58rpx;
}
.gameLabel {
	background: #f4f5fa;
	width: 175rpx;
	text-align: center;
	line-height: 80rpx;
	height: 80rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	overflow:hidden;
	-webkit-line-clamp: 1; //多行在这里修改数字即可
	-webkit-box-orient: vertical;
}
.gameItem {
	width: calc(25% - 12px);
	margin-right: 12px;
	.gameText {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		overflow:hidden;
		-webkit-line-clamp: 1; //多行在这里修改数字即可
		-webkit-box-orient: vertical;
		padding: 0 10rpx;
	}
}
.gameItem:nth-child(4n) {
	margin-right: 0;
}
.gameItem:last-child:nth-child(4n + 2) {
	margin-right: calc((100% - 25%) / 3 * 2);
}
.gameItem:last-child:nth-child(4n + 3) {
	margin-right: calc((100% - 25%) / 3 * 1);
}
</style>
